<template>
	<view>
		<image style="width: 100vw; height:40vh;" :src="multigraphInfo.backgroundImgIdUrl" mode=""></image>
		<view class="row padding-horizontal-small col" >
			<view class="">
				<image style="width: 100rpx; height: 100rpx; border:4rpx solid #fff; border-radius: 100rpx;" :src="multigraphInfo.headImgUrl" mode=""></image>
			</view>
			<view class="">
				<view class="font-size-medium padding-small" style="font-size: 24rpx;">
					{{multigraphInfo.nickname}}
				</view>
				<view class="padding-small font-color-black" style="font-size: 20rpx;">
					{{multigraphInfo.keyword}}
				</view>
			</view>
		</view>
		<view class="bottom row col font-size-medium">
			<view class="row col" style="flex-direction: column;">
				<image @click="setClipboardDataName" src="../../static/images/imgs1.png" mode=""></image>
				<view class="">
					复制昵称
				</view>
			</view>
			<view class="row col" style="flex-direction: column;">
				<image @click="setClipboardDataqianming" src="../../static/images/imgs3.png" mode=""></image>
				<view class="">
					复制签名
				</view>
			</view>
			<view @click="downloadImage" class="row col" style="flex-direction: column;">
				<image  src="../../static/images/imgs2.png" mode=""></image>
				<view class="">
					下载套图
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { multigraphInfo } from "@/service/index.js";
	export default {
		data() {
			return {
				multigraphInfo:{}
			}
		},
		onLoad(option) {
			this.getMultigraphInfo(option.id)
		},
		methods: {
			async getMultigraphInfo(id){
				let multigraphInfos = await multigraphInfo(id)
				this.multigraphInfo = multigraphInfos.data
				console.log('获取到的套图详情',this.multigraphInfo);
			},
			setClipboardDataName(){
				uni.setClipboardData({
					data: this.multigraphInfo.nickname,
					success: function () {
						console.log('success');
					}
				});
			},
			setClipboardDataqianming(){
				uni.setClipboardData({
					data: this.multigraphInfo.keyword,
					success: function () {
						console.log('success');
					}
				});
			},
			downloadImage(){
				let that = this
				
				Promise.all([p1, p2]).then((result) => {
					that.$message.showToast('都保存到相册啦~')
					console.log(result)               //['成功了', 'success']
				}).catch((error) => {
				  console.log(error)
				})
			
				let p1 = new Promise((resolve, reject) => {
						uni.downloadFile({
						url: this.multigraphInfo.headImgUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath:res.tempFilePath,
									success: function () {
										  resolve('成功了')
									}
								});
							}
						}
					});
				})
				let p2 = new Promise((resolve, reject) => {
						uni.downloadFile({
						url: this.multigraphInfo.backgroundImgIdUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath:res.tempFilePath,
									success: function () {
										  resolve('成功了')
									}
								});
							}
						}
					});
				})
					
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.bottom{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 140rpx;
	width: 100vw;
	justify-content: space-around;
	background-color: rgba(250, 250, 250, 0.5);
	z-index: 10;
	image{
		margin-bottom: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}
}
</style>
